<template>
    <!-- <h1>TabItem</h1> -->
    <div ref="el" :style="style" class="tab-item" @click="handleClick">
        <div class="tab-item__wrap">
            <slot name="icon" />
            <div class="tab-item__label">
                <slot>{{ title }}</slot>
            </div>
            <div v-if="badge" class="tab-item__badge">
                {{ badge }}
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, inject, onMounted, onUnmounted, toRef } from 'vue';
import type { TabsHeadInjection, TabsBottomInjection, TabItemInstance } from './types';
import { tabsHeadInjectionKey, tabsBottomInjectionKey } from './injectionKeys';

defineOptions({
    name: 'TabItem',
})

const props = defineProps({
    title: String,
    name: [String, Number],
    badge: [String, Number],
});

/*
    设默认值，且默认值要被判定为 false 。
    目的：
        1、不设默认值，当 TabsBottom 组件引用 TabItem 组件时，
            问题描述：
                const injection = inject<TabsHeadInjection>(tabsHeadInjectionKey) || inject<TabsBottomInjection>(tabsBottomInjectionKey); 
                在前面 tabsHeadInjectionKey 的 inject 不存在时，会有警告：

                    [Vue warn]: injection "Symbol(tabsHeadInjectionKey)" not found. 
                    at <TabItem key="find" title="发现" name="find"  ... > 
                    at <TabsBottom modelValue="home" onUpdate:modelValue=fn onChange=fn<handleTabsBottomChange> > 
                    at <App>
                    runtime-core.esm-bundler.js:51
                    [Vue warn]: injection "Symbol(tabsHeadInjectionKey)" not found. 
                    at <TabItem key="mine" title="我" name="mine"  ... > 
                    at <TabsBottom modelValue="home" onUpdate:modelValue=fn onChange=fn<handleTabsBottomChange> > 
                    at <App>
        2、默认值设为 null ，是为了触发逻辑或的 `||` 的短路原则
*/
// 自动识别注入源 ★★★
const injection = inject<TabsHeadInjection | null>(tabsHeadInjectionKey, null) || inject<TabsBottomInjection | null>(tabsBottomInjectionKey, null);

if (!injection || !injection.activeValue || !injection.activeColor || !injection.setActiveValue) {
    throw new Error('Injection Error: TabItem must be used in TabsHead or TabsBottom, please check the injection source.');
}

const el = ref();
const style = computed(() => {
    return injection?.activeValue.value ===
        props.name ? {
            color: injection?.activeColor.value,
        } : {};
});
const handleClick = () => {
    injection?.setActiveValue(props.name);
};

const instance: TabItemInstance = {
    name: toRef(props, 'name'),
    el,
};

onMounted(() => {
    (injection as TabsHeadInjection).addItem?.(instance);
});
onUnmounted(() => {
    (injection as TabsHeadInjection).removeItem?.(instance);
});
</script>

<style scoped>
.tab-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tab-item__wrap {
    position: relative;
}

.tab-item__badge {
    position: absolute;
    top: 4px;
    right: -10px;
    padding: 0 4px;
    min-width: 8px;
    height: 14px;
    font-size: 9px;
    line-height: 14px;
    color: #fff;
    background: #ff411c;
    white-space: nowrap;
    border-radius: 100px;
    transform: translate(50%, -50%);
    text-align: center;
}
</style>